<template>
	<el-row>
		<el-col :span="24">
			<el-card class="box-card">
				<div id="orderTotalCount" style="height: 300px;"></div>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="1">
		<el-col :span="12">
			<el-card class="box-card">
				<div id="typeLiveRate" style="height: 400px;"></div>
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card class="box-card">
				<div id="orderAmount" style="height: 400px;"></div>
			</el-card>
		</el-col>
	</el-row>
</template>

<script>
	import * as echarts from 'echarts';
	import {
		ElMessage
	} from 'element-plus'



	export default {
		data() {
			return {}
		},
		methods: {},
		mounted() {
			this.axios.get('chart/recentordercounts')
				.then(resp => {
					if (!resp.data.flag) {
						ElMessage.error(resp.data.msg);
						return;
					}
					let list = resp.data.data.list;
					let dates = list.map((item) => {
						return item.orderDate;
					});
					let counts = list.map((item) => {
						return item.orderCount;
					});
					orderTotalCountChart(dates, counts);
				});

			this.axios.get('chart/monthtypeliverate')
				.then(resp => {
					if (!resp.data.flag) {
						ElMessage.error(resp.data.msg);
						return;
					}
					let data = resp.data.data.list;
					typeLiveRateChart(data);
				});
			
			this.axios.get('chart/monthorderamount')
				.then(resp => {
					if (!resp.data.flag) {
						ElMessage.error(resp.data.msg);
						return;
					}
					let list = resp.data.data.list;
					let dates = list.map((item) => {
						return item.checkDate;
					});
					let amounts = list.map((item) => {
						return item.orderAmount;
					});
					orderAmountChart(dates, amounts);
				});
				

		}

	}

	function orderAmountChart(dates, amounts) {
		let chartDom = document.getElementById('orderAmount');
		let myChart = echarts.init(chartDom);
		let option;

		option = {
			title: {
				text: '本月每日订单总金额统计',
				left: 'center'
			},
			xAxis: {
				type: 'category',
				data: dates
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: amounts,
				type: 'bar'
			}]
		};

		option && myChart.setOption(option);

	}

	function typeLiveRateChart(data) {
		let chartDom = document.getElementById('typeLiveRate');
		let myChart = echarts.init(chartDom);
		let option;

		option = {
			title: {
				text: '本月各房型入住比例',
				left: 'center'
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
			},
			series: [{
				name: '入住比例',
				type: 'pie',
				radius: '50%',
				data: data,
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};

		option && myChart.setOption(option);

	}

	function orderTotalCountChart(dates, counts) {
		let chartDom = document.getElementById('orderTotalCount');
		let myChart = echarts.init(chartDom);
		let option;

		option = {
			title: {
				'text': '最近90天内每日订单量',
				'left': 'center'
			},
			xAxis: {
				type: 'category',
				data: dates
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: counts,
				type: 'line'
			}]
		};

		option && myChart.setOption(option);
	}
</script>

<style>
</style>
